<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<head>
 <base href="<%=basePath%>">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="apple-mobile-web-app-capable" content="no" />
  <meta name="format-detection" content="telephone=no">
  <title>我的收银台</title>
  <script src="static/js/cssrem.js"></script>
  <link href="static/css/style.css" rel="stylesheet">
  <style>
.layui-m-layershade{
  	    background-color: rgba(0,0,0,.6)!important;
  }
 .layui-m-layercont i{
  	background-color:rgba(196, 159, 86, 0.86)!important;
  }
.layui-m-layerchild{
  color:#c49f56!important;
  }
  </style>
  </head>
<body>
<header class="header">
    <div class="header-bg"></div>
    <div class="titlet-bar white">
      <a href="javascript:;" class="btn-goback active dib"></a>
      <div class="title ell g3">收银台</div>
    </div>
  </header>
<div class="content">
    <div class="wrapper">
      <div class="pay-amount tc">
        <div class="dt tc f0">
          <span class="icon-money dib vm"></span>
          <input type="hidden" value="${resMap.transactionCode }" id="transactionCode" name="transactionCode">
          <input type="hidden" value="${resMap.price }" id="price" name="price">
          <span class="money dib vm"><em class="f38 g3">支付金额：</em>￥${resMap.price}</span>
        </div>
      </div>
      <ul class="pay-method">
<!--         <li class="pay-method-item pay-method--yl bgwh active">
          <div class="cell">
            <div class="cell-hd"><i class="icon-pay-yl dib vm"></i></div>
            <dl class="cell-bd">
              <dt class="f28">银行卡支付</dt>
              <dd class="f24 g9">信用储蓄卡支付，无需开通网银</dd>
            </dl>
            <div class="cell-fd">
              <i class="btn-radio ion-ios-checkmark dib vm"></i>
            </div>
          </div>
        </li> -->
         <!-- <li class="pay-method-item bgwh active" payMode="wechat">
          <div class="cell">
            <div class="cell-hd"><i class="icon-pay-wx dib vm"></i></div>
            <dl class="cell-bd">
              <dt class="f28">微信支付</dt>
              <dd class="f24 g9">推荐安装微信5.0以上版本的用户使用</dd>
            </dl>
            <div class="cell-fd"><i class="btn-radio  ion-ios-checkmark dib vm"></i></div>
          </div>
        </li> -->
        <li class="pay-method-item bgwh active" payMode="alipay">
          <div class="cell">
            <div class="cell-hd"><i class="icon-pay-zfb dib vm"></i></div>
            <dl class="cell-bd">
              <dt class="f28">支付宝支付</dt>
              <dd class="f24 g9">推荐有支付宝账号的用户使用</dd>
            </dl>
            <!-- ion-ios-circle-outline -->
            <div class="cell-fd"><i class="btn-radio  ion-ios-checkmark dib vm"></i></div>
          </div>
        </li>
      </ul>

      <div class="tc tc">
        <a class="btn-submit dib" href="javascript:;" price="确认支付￥${resMap.price}">确认支付￥${resMap.price}</a>
      </div>
      <div id="alipay_box"></div>
    </div>
  </div>
  <link href="http://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
  <script src="static/js/layer_mobile/layer.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      radio()
      submit()
    })
	var load;
    var btnSubmit = document.querySelector('.btn-submit');
    function submit() {
      btnSubmit.addEventListener('click', function () {
    	  this.innerHTML='正在支付';
    	  var payMode = document.querySelector('.pay-method-item.active').getAttribute('payMode');
    	  var params = new Object();
    	  params.transactionCode = document.querySelector('#transactionCode').value;
    	  params.price = document.querySelector('#price').value;
            // Loading
             load = layer.open({
              type: 2,
              shadeClose: false,
              content: '支付中'
            });
       		if(payMode === 'alipay'){
       			goAliPayWap(params);
       			
       		}else if(payMode === 'wechat'){
       			goWechatWap(params);
       		}
     
      })
    }
    function goAliPayWap(params){
    	axios({
    		  method: 'post',
    		  url: 'wap/lightpay/confirm_alipay_pay',
    		  data: params
    		}).then(function(res){
    			var data = res.data;
    			var state = data.result.state;
    			if(state == 1){
    				document.querySelector('#alipay_box').innerHTML= data.url;
    				document.forms[0].submit();
    				layer.close(load);
    			}else{
    				layer.close(load);
    				layer.open({
        			    content:data.result.message,
        			    time: 2
        			});
    			}
    			btnSubmit.innerHTML=btnSubmit.getAttribute('price');
    		}).catch(function(err){
    			
    		});

    	
    }	

    function goWechatWap(params){
    	axios({
    		  method: 'post',
    		  url: 'wap/lightpay/weChatPay',
    		  data: params
    		}).then(function(res){
    			var data = res.data;
    			var state = data.result.state;
    			if(state == 1){
    				layer.close(load);
    				var params = JSON.stringify(data.prePayInfo);
    				window.location.href = "weChatPay://"+params;   				
    			}else{
    				layer.close(load);
    				layer.open({
        			    content:data.result.message,
        			    time: 2
        			});
    			}
    			btnSubmit.innerHTML=btnSubmit.getAttribute('price');
    		}).catch(function(err){
    			
    		});

    	
    }
    
    function radio() {
      var items = document.querySelectorAll('.pay-method-item')
      for (var i = 0; i < items.length; i++) {
        var item = items[i];
        item.addEventListener('click', function () {
          for (var i = 0; i < items.length; i++) {
        	items[i].classList.remove('active')
            items[i].querySelector('.btn-radio').classList.add('ion-ios-circle-outline')
          }
          this.classList.add('active')
          this.querySelector('.btn-radio').classList.remove('ion-ios-circle-outline')
        })
      }

    }
  </script>
<script type="text/javascript" src="static/js/app.js"></script><script type="text/javascript" src="static/js/pay.js"></script>
</body>

</html>

